<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    请输入宽度：<input type="text" id="width"><br>
    请输入高度：<input type="text" id="height"><br>
    请选择颜色：<input type="color" id="color"><br>
    请输入盒子的内容：<textarea id="txt"></textarea><br>
    <input type="button" id="create1" value="根据指定宽高创建盒子"><br>
    <input type="button" id="create2" value="创建一个默认盒子">
</body>
<script>
    // 选择器
    var create1 = document.getElementById("create1");
    var create2 = document.getElementById("create2");
    var width = document.getElementById("width");
    var height = document.getElementById("height");
    var color = document.getElementById("color");
    var txt = document.getElementById("txt");

    // 绑定事件
    create1.onclick = function(){
        // 创建元素
        var div = document.createElement("div");
        // 插入到指定父级
        document.body.appendChild(div);

        // 设置样式       获取表单控件的内容
        div.style.width = width.value + "px";
        div.style.height = height.value + "px";
        div.style.background = color.value;

        // 设置非表单控件的内容
        div.innerHTML = txt.value;

        // 调用创建删除按钮的功能函数，并将当前盒子传进去
        createDelete(div);
    }

    create2.onclick = function(){

        var div = document.createElement("div");
        div.style.width = "100px";
        div.style.height = "100px";
        div.style.background = "red";
        document.body.appendChild(div);

        createDelete(div);
    }



    function createDelete(parent){
        // 创建一个新的按钮，准备用来做删除功能
        var delBtn = document.createElement("input");
        delBtn.type = "button";
        delBtn.value = "删除";
        // 绑定点击事件
        delBtn.onclick = function(){
            // 删除当前按钮所在的盒子
            delBtn.parentNode.remove();
        }
        // 将删除按钮，添加到盒子内
        parent.appendChild(delBtn);
    }


</script>
</html>